<template>
  <el-card class="page-container">
    <!-- 班级选择 -->
    <el-form class="mb-4">
      <el-form-item label="选择班级：">
        <el-select v-model="currentClass" placeholder="请选择班级" @change="handleClassChange">
          <el-option
            v-for="cls in classList"
            :key="cls"
            :label="`${cls} (${getClassStudentCount(cls)}人)`"
            :value="cls"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <div class="header">
      <el-descriptions :column="3" size="large" border>
        <el-descriptions-item label="班级总人数">
          {{ totalStudents }}
        </el-descriptions-item>
        <el-descriptions-item label="就餐人数">
          <el-tag type="success">{{ diningCount }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="未就餐人数">
          <el-tag :type="hasExceededLimit ? 'danger' : 'warning'">
            {{ notDiningCount }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <div v-if="hasExceededLimit" style="color: #f56c6c; margin-top: 10px">
        ⚠️ 未就餐人数已超过 5 人，请检查！
      </div>
    </div>

    <!-- 全部就餐 -->
    <div
      v-if="notDiningCount === 0"
      style="color: #67c23a; text-align: center; font-size: 16px; margin: 20px 0"
    >
      —— 所有学生均已登记就餐 ——
    </div>

    <!-- 就餐学生名单 -->
    <h3 style="margin: 20px 0">就餐学生名单</h3>
    <el-table :data="diningNames" style="width: 100%" empty-text="暂无就餐学生">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="姓名">
        <template #default="{ row }">
          {{ row }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 未就餐学生名单 -->
    <h3 style="margin: 20px 0">未就餐学生名单</h3>
    <el-table :data="notDiningNames" style="width: 100%" empty-text="无未就餐学生">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="姓名">
        <template #default="{ row }">
          {{ row }}
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { useDiningStore } from "@/stores/diningRecord";
import { storeToRefs } from "pinia";

const diningStore = useDiningStore();

// 解构所有响应式状态
const {
  currentClass,
  classList,
  totalStudents,
  diningCount,
  notDiningCount,
  diningNames,
  notDiningNames,
  hasExceededLimit,
} = storeToRefs(diningStore);

// 解构方法
const { setCurrentClass } = diningStore;

// 切换班级
const handleClassChange = (className: string) => {
  setCurrentClass(className);
};

const getClassStudentCount = (className: string) => {
  return 20;
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  margin-bottom: 20px;
}

.mb-4 {
  margin-bottom: 1rem;
}

h3 {
  font-weight: 500;
  color: #333;
}
</style>
